<template>
  <a-button type="text" @click="handleBack">返回</a-button>
  <UserView
    :user="user"
    :edit="edit"
    @handleEdit="handleEdit"
    @handleCancel="handleCancel"
    @handleSave="handleSave"
    @onUpload="onUpload"
  />
</template>
<script lang="ts">
import { User } from '@/services/quest';
import { useEditUserStore, useLoginInforStore } from '@/store/login';
import { defineComponent, computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import UserView from './UserView.vue';
export default defineComponent({
  components: { UserView },
  setup() {
    const infoStore = useLoginInforStore();
    const { editInfor } = useEditUserStore();

    infoStore.queryInfo();

    const user = computed(() => infoStore.userInfo);
    const edit = ref<boolean>(false);

    const handleEdit = () => {
      edit.value = true;
    };

    const handleCancel = () => {
      edit.value = false;
    };
    const router = useRouter();
    const handleBack = () => {
      router.go(-1);
    };

    const onUpload = (value: string) => {
      // console.log(value);
      infoStore.setAvatar(value);
    };

    const handleSave = async (value: unknown) => {
      await editInfor(value as User);

      await infoStore.queryInfo();
    };

    return {
      handleBack,
      user,
      edit,
      handleEdit,
      handleCancel,
      editInfor,
      onUpload,
      handleSave,
    };
  },
});
</script>
<style lang="less" scoped>
.page {
  border-radius: 8px;
  background-color: white;
  padding: 24px;
}
</style>
